<template>
	<div v-if="visible" style="margin-bottom: 18px" id="handleForm">
		<a-layout>
			<a-layout-content
				style="background: #fff; padding: 20px; box-sizing: border-box"
			>
				<a-form-model v-bind="layout">
					<a-form-model-item label="产品名称" prop="" style="">
						<!-- display: flex; justify-content: space-between; -->
						<div style="display: flex; justify-content: space-between">
							<a-select
								style="width: 120px"
								v-model="getPtype"
								allowClear
								disabled
							>
								<a-select-option
									v-for="(item, index) in productList"
									:value="index"
									:key="index"
									>{{ item }}</a-select-option
								>
							</a-select>

							<!-- <span>{{ getPtype }}</span> -->

							<a-button @click="addAttr" :disabled="flag">创建新属性</a-button>
						</div>
					</a-form-model-item>
					<a-form-model-item label="批量设定" prop="">
						<div class="batch-set" style="">
							<a-switch
								@change="onChange"
								:default-checked="autoOn"
								:disabled="disabled"
							/>
							<div class="add-batch">
								<!-- :disabled="Object.keys(option2).length === 0 || disabled" -->
								<a-input-number
									placeholder="4位数字"
									v-model="valueCount"
									:max="99999999"
									style="width: 102px"
									:disabled="flag"
									@keyup.enter.native="addSection"
								/>

								<a-icon
									v-if="!flag"
									type="plus-circle"
									class="plus-circle"
									@click="addSection"
									style=""
								/>
							</div>
							<a-input
								v-model="unit"
								placeholder="单位(默认为件)"
								style="width: 120px"
								:disabled="flag"
							/>
						</div>
						<p style="" class="section">
							<!-- 区间 -->
							<com-span
								:unit="unit ? unit : '件'"
								ref="spancom"
								@clearcountValue="clearcountValue"
								:countValue="spanComData[index]"
								:index="index"
								:disabled="disabled"
								v-for="(item, index) in comCount"
								:key="index"
							/>
						</p>
					</a-form-model-item>

					<div style="position: relative">
						<attr-wrapper
							ref="attrWrapperComs"
							@removeWrapper="removeWrapper"
							v-for="(item, index) in attrWrapperArr"
							:attrNameCount="index + 1"
							:key="index"
							v-if="item"
						/>
						<a-button
							v-if="!showBtn"
							size="default"
							@click="saveAttr()"
							style="position: absolute; right: 5px; bottom: 0"
							>保存</a-button
						>
						<a-button
							v-if="showBtn"
							size="default"
							@click="editAttr"
							style="position: absolute; right: 5px; bottom: 0"
							>编辑</a-button
						>
						<!-- style="position: absolute; right: 75px; bottom: 0" -->
						<!-- <a-button
							style="position: absolute; right: 0; bottom: 0"
							size="default"
							@click="submitAttrs"
							>提交</a-button
						> -->
					</div>
				</a-form-model>
			</a-layout-content>
		</a-layout>
	</div>
</template>

<script>
	import { mapGetters, mapMutations } from "vuex"
	const lodash = require("lodash")
	export default {
		name: "handleForm",
		props: {},
		data() {
			this.productList = {
				1: "场内转运",
				2: "场内装卸",
				3: "同城配送",
			}
			this.sexList = ["男", "女"]
			this.id = null
			this.handleType = null
			this.statusList = [
				{
					key: 1,
					text: "正常",
				},
				{
					key: 0,
					text: "停用",
				},
				{
					key: -1,
					text: "冻结",
				},
			]
			return {
				unit: "",
				showBtn: true,
				layout: {
					labelCol: { span: 4 },
					wrapperCol: { span: 14 },
				},
				disabled: true,
				visible: true,
				flag: true,
				valueCount: "",
				spanComData: [],
				comCount: 0,
				tempSpanComData: [],
				tempComCount: 0,
				// attrWrapperArr: 0,
				attrWrapperArr: [0, 0, 0],
				indexCount: 0,
				// attrCount: 1,
				attrValue: "",
				attrs: {
					// attr1: {
					// 	name: "",
					// 	value: [],
					// },
					// attr2: {
					// 	name: "",
					// 	value: [],
					// },
					// attr3: {
					// 	name: "",
					// 	value: [],
					// },
				},
				option1: [],
				option2: {},
			}
		},

		components: {
			// "attr-input": () => import("./attrInput.vue"),
			"attr-wrapper": () => import("./attrWrapper.vue"),
			"com-span": () => import("./spanCom.vue"),
		},
		computed: {
			productDetailChange() {
				return this.$store.state.productDetail
			},
			...mapGetters({
				// disabled: "getDisabled",
				getPtype: "getPtype",
				autoOn: "getAutoOn",
			}),
		},
		watch: {
			autoOn(a, b) {
				console.log(a, b)
				if (a === true) {
					this.spanComData = this.tempSpanComData
					this.comCount = this.tempComCount
				} else {
					this.spanComData = []
					this.comCount = 0
				}
			},
			// 监听vuex中产品详情数据变动
			productDetailChange(a, b) {
				console.log("监听产品详情", a, b)

				if (Object.keys(a).length > 0) {
					// if (Object.keys(a.option2).length > 0) {
					// 	this.setAutoOn(true)
					// }
					if (a.option3.values && a.option3.values.length > 0) {
						a.option3.values.forEach((item) => {
							// console.log(item["定价"])
							// 为了页面上显示以元为单位
							item["定价"] = item["定价"] ? item["定价"] / 100 : ""
							// return item
						})
					}
					// 页面表格显示的数据
					this.unit = a.option2.unit
					this.$emit("setUnit", this.unit)

					this.$emit("renderData", a.option3)

					this.spanComData = []
					// this.option2 = {}
					// this.option1 = []

					if (a.option1 && a.option2) {
						this.option2 = a.option2
						this.option1 = a.option1
					}

					if (a.option2.val && a.option2.val.length > 0) {
						if (a.option2.val.length == 1) {
							this.spanComData.push(a.option2.val[0][1])
						}
						if (a.option2.val.length > 1) {
							// a.option2.val.splice(a.option2.val.length - 1, 1) // 去除最后一项 99999999

							let tempArr = a.option2.val.slice(0, a.option2.val.length - 1) // 去除最后一项 99999999
							// this.spanComData.push(a.option2.val[1])
							for (let i = 0, len = tempArr.length; i < len; i++) {
								// this.spanComData.push(tempArr[1])
								if (i === 0) {
									this.spanComData.push(tempArr[0][1])
								}
								if (i > 0 && i <= tempArr.length - 1) {
									this.spanComData.push(tempArr[i][1])
								}
							}
						}

						this.option2 = a.option2 || {}
						this.option1 = a.option1 || []

						this.flag = Object.keys(this.option2).length > 0 || false
					}

					// if(){}

					this.spanComData.sort((a, b) => {
						return a - b
					})
					this.comCount = this.spanComData.length
					console.log("批量设定区间", this.spanComData, this.option2)
					// ===============================================
					// this.attrWrapperArr = a.option1.length

					console.log(a.option1)
					this.attrWrapperArr = [0, 0, 0]
					for (let i = 0, len = a.option1.length; i < len; i++) {
						switch (a.option1[i].code) {
							case "a":
								this.attrWrapperArr[i] = 1
								break
							case "b":
								this.attrWrapperArr[i] = 1
								break
							case "c":
								this.attrWrapperArr[i] = 1
								break
						}
					}
					this.indexCount = a.option1.length
					// ===============================================
					setTimeout(() => {
						let comAttrWrapper = this.$refs.attrWrapperComs
						console.log(comAttrWrapper)
						if (!comAttrWrapper || comAttrWrapper.length === 0) {
							return
						}

						for (let i = 0, len = comAttrWrapper.length; i < len; i++) {
							comAttrWrapper[i]["indexCount"] = a.option1[i].val
								? a.option1[i].val.length
								: 0

							comAttrWrapper[i]["disabled"] = true
							comAttrWrapper[i]["attrNameValue"] = a.option1[i].name

							if (a.option1[i].val && a.option1[i].val.length > 0) {
								for (let j = 0, lenJ = a.option1[i].val.length; j < lenJ; j++) {
									comAttrWrapper[i].attrInputCountArr[j] = 1
								}
							}
						}

						setTimeout(() => {
							for (let m = 0, lenM = a.option1.length; m < lenM; m++) {
								for (let p = 0, lenP = a.option1[m].val.length; p < lenP; p++) {
									// comAttrWrapper[m].unit = a.option1[m].unit
									comAttrWrapper[m].$refs["attInput"][p]["attrValue"] =
										a.option1[m].val[p]
								}
							}
						}, 400)
					}, 400)

					// this.$emit("renderData", a.option3)
				}

				this.tempSpanComData = [...this.spanComData]
				this.tempComCount = this.comCount
				console.log(this.tempSpanComData, this.tempComCount)
			},
		},
		methods: {
			...mapMutations({
				setAutoOn: "setAutoOn",
			}),
			// 编辑
			editAttr() {
				this.flag = false
				this.showBtn = false
				let comAttrWrapper = this.$refs.attrWrapperComs

				console.log(comAttrWrapper)
				if (!comAttrWrapper || comAttrWrapper.length === 0) {
					this.disabled = false
					return
				}
				for (let i = 0, len = comAttrWrapper.length; i < len; i++) {
					comAttrWrapper[i].changeStatus(false) // 点击保存 调用了 attrWrapper.vue 中方法 修改了disabled属性 this.disabled = false
				}

				this.disabled = comAttrWrapper[0].disabled
			},
			// 保存
			saveAttr() {
				let comAttrWrapper = this.$refs.attrWrapperComs
				console.log(comAttrWrapper)

				if (!comAttrWrapper || comAttrWrapper.length === 0) {
					return this.$message.warning("请添加一个属性吧")
				}
				this.option1 = []

				let len = comAttrWrapper.length
				let repeatAttrNameValue = [] // 用于判断是否含有重复属性名
				for (let i = 0; i < len; i++) {
					repeatAttrNameValue.push((comAttrWrapper[i].attrNameValue + "").trim())
				}
				if (new Set(repeatAttrNameValue).size != repeatAttrNameValue.length) {
					return this.$message.warning("属性名不能重复")
				}
				for (let i = 0; i < len; i++) {
					console.log(comAttrWrapper[i])

					if (!comAttrWrapper[i].attrNameValue) {
						return this.$message.warning("属性名不能为空")
					}

					let { attrInputValues } = comAttrWrapper[i].getInputData() // 点击保存 调用了 attrWrapper.vue 中方法 修改了disabled属性 this.disabled = true
					console.log("单个属性下所有赋值组成的数组", attrInputValues)

					// 传给后端数据
					this.option1.push(
						this.$removeField({
							name: comAttrWrapper[i].attrNameValue,
							// code: ["a", "b", "c"][comAttrWrapper[i].attrWrapperArr.length - 1], // 这里最多三个属性
							code: ["a", "b", "c"][i], // 这里最多三个属性
							// unit,
							val: attrInputValues,
						})
					)

					if (
						attrInputValues.every((item) => {
							return !item
						})
					) {
						return this.$message.warning("赋值不能全部为空")
					}

					comAttrWrapper[i].changeStatus(true)
					// 保存时 合并属性名 和 赋值数据 最后得到
					// => attrs = {attr1:{ name: "颜色", value: ['红色', '绿色'], key: "颜色", dataIndex: "颜色" }, attr2: {}, attr3: {}}
					this.getAttrInputValue(
						attrInputValues,
						comAttrWrapper[i].attrNameCount,
						comAttrWrapper[i].attrNameValue
					)
				}

				this.flag = true
				this.showBtn = true
				this.valueCount = ""
				// this.unit = ""

				this.disabled = comAttrWrapper[0].disabled

				// 传给后端数据
				this.option2 = this.produceSection(this.spanComData)
				this.$emit("setUnit", this.unit)
				// ========================================
				// 点击保存时 价格表就同步数据
				console.log(this.attrs)
				let totalData = this.mergeData(this.spanComData, this.attrs)
				console.log(totalData)
				this.$emit("renderPriceTableData", totalData)
				console.log("option2", this.option2)
				console.log("option1", this.option1)
				// 生成区间
				// this.showBtn = comAttrWrapper[0].disabled
			},
			// 计算数组中某个元素出现次数
			totalEleCount(arr, ele = "") {
				var num = 0
				for (var i = 0, len = arr.length; i < len; i++) {
					if (arr[i] === ele) {
						num++
					}
				}
				return num
			},
			// 点击保存 收集 option2 批量设定区间数据
			produceSection(data1 = []) {
				let sectionObj = {
					name: "批量设定",
					code: "p",
					val: [],
				}
				if (data1.length === 1) {
					// 0-10区间
					for (let i = 0, lenI = data1.length + 1; i < lenI; i++) {
						if (i === 0) {
							sectionObj.val.push([1, data1[i]])
						}
						if (i === 1) {
							sectionObj.val.push([data1[i - 1] + 1, 99999999])
						}
					}
				}

				if (data1.length > 1) {
					// 多个区间
					for (let i = 0, lenI = data1.length + 1; i < lenI; i++) {
						if (i === 0) {
							sectionObj.val.push([1, data1[i]])
						}

						if (i === data1.length) {
							sectionObj.val.push([data1[i - 1] + 1, 99999999])
						}

						if (i > 0 && i < data1.length) {
							sectionObj.val.push([data1[i - 1] + 1, data1[i]])
						}
					}
				}

				return sectionObj
			},
			// getAttrInputValue(data, attrWrapperArr, attrNameValue, unit) {
			// 保存时 合并属性 和 赋值数据
			getAttrInputValue(attrInputValues = [], attrNameCount, attrNameValue = "") {
				console.log(attrInputValues, attrNameCount, attrNameValue)

				// if (unit) {
				// 	attrInputValues = attrInputValues.map((item) => {
				// 		return item + unit
				// 	})
				// }

				if (attrNameCount === 1) {
					// 只有一个属性
					this.attrs.attr1 = { name: "", value: [], key: "", dataIndex: "" }

					this.attrs.attr1.value = attrInputValues
					this.attrs.attr1.name = attrNameValue

					this.attrs.attr1.key = attrNameValue
					this.attrs.attr1.dataIndex = attrNameValue
				} else if (attrNameCount === 2) {
					// 两个属性
					this.attrs.attr2 = { name: "", value: [], key: "", dataIndex: "" }
					this.attrs.attr2.value = attrInputValues
					this.attrs.attr2.name = attrNameValue

					this.attrs.attr2.key = attrNameValue
					this.attrs.attr2.dataIndex = attrNameValue
				} else if (attrNameCount === 3) {
					// 三个属性
					this.attrs.attr3 = { name: "", value: [], key: "", dataIndex: "" }
					this.attrs.attr3.value = attrInputValues
					this.attrs.attr3.name = attrNameValue

					this.attrs.attr3.key = attrNameValue
					this.attrs.attr3.dataIndex = attrNameValue
				}

				console.log(this.attrs)
			},
			submitAttrs() {
				// 区间数据
				console.log("区间数据", this.spanComData)
				// 属性1\2\3的数据
				console.log("属性数据", this.attrs)
				if (this.showBtn === false) {
					return this.$message.warning("请保存创建的属性")
				}
				// this.saveAttr()
				// ==============================

				// this.$emit("monitorChecked")
				// if (Object.keys(this.attrs).length === 0) {
				// 	return this.$message.warning("请创建属性")
				// }

				// if (Object.keys(this.attrs).length > 0) {
				// 	return this.$message.warning("属性值不能为空")
				// }

				// let data1 = this.spanComData
				// let data2 = this.attrs

				this.$modal.confirm({
					title: "提示",
					content: "确定提交吗？",
					okText: "确定",
					cancelText: "取消",
					centered: true,
					onOk: () => {
						console.log("提交")

						let totalData = this.mergeData(this.spanComData, this.attrs)
						console.log(totalData)

						// => {titles: [{dataIndex: "SKU",key: "SKU",title: "SKU"}], values: [{SKU: "a1b1c1p1",section: "[0,10]",定价: "",菜品: "蔬菜",重量: "100KG",颜色: "绿色"}]}
						this.$emit("getTotalData", totalData, this.option1, this.option2)

						// 暂时不清空
						// this.valueCount = ""
						// this.comCount = 0
						// this.attrWrapperArr = 0
						// this.spanComData = []
						// this.attrs = {}
					},
					onCancel: () => {
						this.$message.warning("提交取消了")
					},
				})
				// console.log(totalData)
			},
			mergeData(data1, data2) {
				// data1 => [10, 20] data2 => {attr1: { name: '', value: [], dataIndex: '', key: '' }, attr2: {}}
				console.log(data1, data2)
				// return
				let sectionArr = [] //批量设定数组
				let tempArr = [] // 属性赋值数据
				let tempColumns = [] // 属性标题数据
				if (data1.length === 0) {
					return this.formatAttr(data2, tempColumns, tempArr, sectionArr)
					// return []
				}

				if (data1.length === 1) {
					// 区间 0 - 10 11 - 99999999
					for (let i = 0, lenI = data1.length + 1; i < lenI; i++) {
						if (i === 0) {
							sectionArr.push([1, data1[i]])
						}

						if (i === 1) {
							sectionArr.push([data1[i - 1] + 1, 99999999])
						}
					}
				}
				// ====================================================
				// => arr = [{ section: '小于10件' }, { section: '>10件' }]
				if (data1.length > 1) {
					// 多个区间 [0, 10] [11, 20]

					for (let i = 0, lenI = data1.length + 1; i < lenI; i++) {
						if (i === 0) {
							sectionArr.push([1, data1[i]])
						}

						if (i === data1.length) {
							sectionArr.push([data1[i - 1] + 1, 99999999])
						}

						if (i > 0 && i < data1.length) {
							sectionArr.push([data1[i - 1] + 1, data1[i]])
						}
					}
				}
				// =========================处理属性================================

				return this.formatAttr(data2, tempColumns, tempArr, sectionArr)
			},
			formatAttr(data2, tempColumns, tempArr, sectionArr) {
				console.log("属性数据", data2) // => {attr1:{dataIndex: "颜色", key: "颜色", name: "颜色", value: ['红色']}, attr2: {}, attr3: {}}
				console.log(data2, tempColumns, tempArr, sectionArr)
				if (Object.keys(data2).length > 0) {
					// 开头
					tempColumns.push({
						title: "SKU",
						dataIndex: "SKU",
						key: "SKU",
					})
					data2 = lodash.omit(data2, ["section"])
					// 遍历所有属性标题
					for (let key in data2) {
						tempColumns.push({
							title: data2[key].name,
							dataIndex: data2[key].dataIndex,
							key: data2[key].key,
						})
					}
					// 结尾
					tempColumns.push({
						title: "单件定价(元)",
						dataIndex: "定价",
						key: "定价",
						scopedSlots: { customRender: "定价" },
					})
					// 设置了批量设定的区间
					if (sectionArr.length > 0) {
						for (let m = 0, lenM = sectionArr.length; m < lenM; m++) {
							let len2 = Object.keys(data2).length
							if (len2 === 1) {
								// 1个属性  颜色(红、绿、蓝)
								for (let key in data2) {
									for (let n = 0, lenN = data2[key].value.length; n < lenN; n++) {
										tempArr.push({
											// ...sectionArr[m],
											section: JSON.stringify(sectionArr[m]),
											// attr1: data2[key].name, // 标题单独放到一个对象
											// color: data2[key].value[n],
											[data2[key].name]: data2[key].value[n],
											定价: "",
											SKU: `a${n + 1}`,
										})
									}
								}
							}

							if (len2 === 2) {
								// 2个属性 比如 颜色(红、绿、蓝)、尺寸(S、M、L)
								// let key1 = data2[0]
								let value1 = data2[Object.keys(data2)[0]]
								let value2 = data2[Object.keys(data2)[1]]
								// if (value1.value.length > 0 && value2.value.length > 0) { // 2个属性都赋值了
								for (let o = 0, lenO = value1.value.length; o < lenO; o++) {
									for (let p = 0, lenP = value2.value.length; p < lenP; p++) {
										tempArr.push({
											// ...sectionArr[m],
											section: JSON.stringify(sectionArr[m]),
											// attr1: value1.name, // 标题单独放到一个对象
											// color: value2.value[p],
											[value2.name]: value2.value[p],
											// attr2: value2.name, // 标题单独放到一个对象
											[value1.name]: value1.value[o],
											定价: "",
											SKU: `a${o + 1}b${p + 1}`,
										})
									}
								}
								// }
								// //
								// if(value1.value.length === 0 && value2.value.length === 0){
								// 	tempArr = []
								// }
							}

							if (len2 === 3) {
								// 3个属性 比如 颜色(红、绿、蓝)、尺寸(S、M、L)、材质(尼龙、棉布)
								// let key1 = data2[0]
								let value1 = data2[Object.keys(data2)[0]]
								let value2 = data2[Object.keys(data2)[1]]
								let value3 = data2[Object.keys(data2)[2]]
								for (let o = 0, lenO = value1.value.length; o < lenO; o++) {
									for (let p = 0, lenP = value2.value.length; p < lenP; p++) {
										for (let q = 0, lenQ = value3.value.length; q < lenQ; q++) {
											tempArr.push({
												// ...sectionArr[m],
												section: JSON.stringify(sectionArr[m]),
												// attr1: value1.name, // 标题单独放到一个对象
												// color: value2.value[p],
												[value2.name]: value2.value[p],
												// attr2: value2.name, // 标题单独放到一个对象
												// size: value1.value[o],
												[value1.name]: value1.value[o],
												// attr3: value3.name, // 标题单独放到一个对象
												// quality: value3.value[q],
												[value3.name]: value3.value[q],
												定价: "",
												SKU: `a${o + 1}b${p + 1}c${q + 1}`,
											})
										}
									}
								}
							}
						}

						// console.log(tempArr) 生成 SKU中批量设定的 p
						console.log(sectionArr, tempArr, tempColumns)
						for (let s = 0, lenS = sectionArr.length; s < lenS; s++) {
							for (let r = 0, lenR = tempArr.length; r < lenR; r++) {
								if (tempArr[r]["section"] === JSON.stringify(sectionArr[s])) {
									tempArr[r]["SKU"] += `p${s + 1}`
								}
							}
						}
					}
					// ============================没设置批量设定的区间时============================
					if (sectionArr.length === 0) {
						let len2 = Object.keys(data2).length
						if (len2 === 1) {
							// 1个属性  颜色(红、绿、蓝)
							for (let key in data2) {
								for (let n = 0, lenN = data2[key].value.length; n < lenN; n++) {
									tempArr.push({
										// ...sectionArr[m],
										section: "",
										// attr1: data2[key].name, // 标题单独放到一个对象
										// color: data2[key].value[n],
										[data2[key].name]: data2[key].value[n],
										定价: "",
										SKU: `a${n + 1}`,
									})
								}
							}
						}

						if (len2 === 2) {
							// 2个属性 比如 颜色(红、绿、蓝)、尺寸(S、M、L)
							// let key1 = data2[0]
							let value1 = data2[Object.keys(data2)[0]]
							let value2 = data2[Object.keys(data2)[1]]

							for (let o = 0, lenO = value1.value.length; o < lenO; o++) {
								for (let p = 0, lenP = value2.value.length; p < lenP; p++) {
									tempArr.push({
										// ...sectionArr[m],
										section: "",
										// attr1: value1.name, // 标题单独放到一个对象
										// color: value2.value[p],
										[value2.name]: value2.value[p],
										// attr2: value2.name, // 标题单独放到一个对象
										[value1.name]: value1.value[o],
										定价: "",
										SKU: `a${o + 1}b${p + 1}`,
									})
								}
							}
						}

						if (len2 === 3) {
							// 3个属性 比如 颜色(红、绿、蓝)、尺寸(S、M、L)、材质(尼龙、棉布)
							// let key1 = data2[0]
							let value1 = data2[Object.keys(data2)[0]]
							let value2 = data2[Object.keys(data2)[1]]
							let value3 = data2[Object.keys(data2)[2]]
							for (let o = 0, lenO = value1.value.length; o < lenO; o++) {
								for (let p = 0, lenP = value2.value.length; p < lenP; p++) {
									for (let q = 0, lenQ = value3.value.length; q < lenQ; q++) {
										tempArr.push({
											// ...sectionArr[m],
											section: "",
											// attr1: value1.name, // 标题单独放到一个对象
											// color: value2.value[p],
											[value2.name]: value2.value[p],
											// attr2: value2.name, // 标题单独放到一个对象
											// size: value1.value[o],
											[value1.name]: value1.value[o],
											// attr3: value3.name, // 标题单独放到一个对象
											// quality: value3.value[q],
											[value3.name]: value3.value[q],
											定价: "",
											SKU: `a${o + 1}b${p + 1}c${q + 1}`,
										})
									}
								}
							}
						}

						// console.log(tempArr) 生成 SKU中批量设定的 p
						// console.log(sectionArr, tempArr, tempColumns)
						// for (let s = 0, lenS = sectionArr.length; s < lenS; s++) {
						// 	for (let r = 0, lenR = tempArr.length; r < lenR; r++) {
						// 		if (tempArr[r]["section"] === JSON.stringify(sectionArr[s])) {
						// 			tempArr[r]["SKU"] += `p${s + 1}`
						// 		}
						// 	}
						// }

						for (let r = 0, lenR = tempArr.length; r < lenR; r++) {
							tempArr[r]["SKU"] += `p0`
						}
					}

					console.log(sectionArr, tempArr, tempColumns)
					// 给每一条SKU数据添加16位的唯一ID
					tempArr.map((item) => {
						item["id"] = item["id"] ? item["id"] : this.getUuid()
					})
					return { values: tempArr, titles: tempColumns }
				} else {
					return { values: [], titles: [] }
				}
			},
			// 生成n位长度的字符串
			getUuid() {
				var s = []
				var hexDigits = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"
				for (var i = 0; i < 36; i++) {
					s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
				}
				s[14] = "4"
				s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1)
				s[8] = s[13] = s[18] = s[23] = "-"
				let uuid = s.join("")
				return uuid
			},
			clearcountValue(index) {
				console.log(index)
				this.spanComData.splice(index, 1)
				this.comCount = this.spanComData.length
				// let ele = this.$refs["spancom"][index]
				// ele.parentNode.removeChild(ele)
			},
			addSection() {
				console.log(this.valueCount, this.spanComData)
				console.log(this.autoOn)
				// if (this.autoOn === false) {
				// 	// this.setAutoOn(true)
				// 	return this.$message.warning("请先打开批量设定开关")
				// }
				if (this.spanComData.includes(this.valueCount)) {
					return this.$message.warning("不能设置重复数字")
				}

				if (!this.valueCount) {
					return this.$message.warning("请输入数字")
					// ++this.count
				}
				if (this.comCount >= 4) {
					return this.$message.warning("最多划分4个区间")
				}
				// this.disabled = false;

				// this.countValue = this.count
				this.spanComData[this.comCount] = this.valueCount
				this.spanComData.sort((a, b) => {
					return a - b
				})
				this.comCount++
				// this.valueCount = ""
			},

			addAttr() {
				console.log(this.attrWrapperArr)
				// if (
				// 	this.attrWrapperArr.every((item) => {
				// 		return item
				// 	})
				// ) {
				// 	return this.$message.warning("最多添加3个属性")
				// }

				if (this.indexCount >= 3) {
					return this.$message.warning("最多添加3个属性")
				}
				// ++this.attrWrapperArr

				console.log(this.indexCount)
				this.attrWrapperArr[this.indexCount] = 1
				this.attrWrapperArr = [...this.attrWrapperArr]
				this.indexCount++
				this.showBtn = false
				// this.attrCount = 1
			},
			removeWrapper(index) {
				console.log(index)
				// this.attrWrapperArr = count
				this.attrWrapperArr[index - 1] = 0
				// 解决删除属性名后 this.attrs中 缓存的属性
				if (index - 1 === 0) {
					delete this.attrs.attr1
				} else if (index - 1 === 1) {
					delete this.attrs.attr2
				} else if (index - 1 === 2) {
					delete this.attrs.attr3
				}
				this.attrWrapperArr = [...this.attrWrapperArr]
				this.indexCount--
				console.log(this.indexCount)
			},
			onChange(checked) {
				console.log(`a-switch to ${checked}`)
				this.setAutoOn(checked)
				this.$emit("switchChecked", checked)
			},
			handleChange(value) {
				console.log(`selected ${value}`)
			},

			showModal(type, recode) {
				// this.handleType = type
				// if (type === "update") {
				// 	Object.keys(this.form).forEach((key) => {
				// 		this.form[key] = recode[key]
				// 	})
				// 	this.id = recode.id
				// }
				// this.visible = true
			},
		},
	}
</script>

<style lang='less'>
	// .ant-col-14 {
	// 	width: 100%;
	// }

	#handleForm {
		.batch-set {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.add-batch {
				position: relative;
				.plus-circle {
					color: #1890ff;
					font-size: 12px;
					cursor: pointer;
					position: absolute;
					right: -28px;
					top: 50%;
					transform: translate(0, -50%);
				}
			}
		}
		.section {
			// width: 100%;
			// display: flex;
			// justify-content: flex-start;
			margin: 0;
			padding: 0;
			// span {
			// 	margin-right: 20px;
			// 	width: auto;
			// 	height: 30px;
			// 	line-height: 30px;
			// 	border-radius: 10px;
			// 	text-align: center;
			// 	cursor: pointer;
			// 	// &.current {
			// 	// 	background-color: #1890ff;
			// 	// 	color: #fff;
			// 	// }
			// }
		}
	}

	.editable-cell {
		position: relative;
		width: 120px;
	}

	.editable-cell-input-wrapper,
	.editable-cell-text-wrapper {
		padding-right: 24px;
	}

	.editable-cell-text-wrapper {
		padding: 5px 24px 5px 5px;
	}

	.editable-cell-icon,
	.editable-cell-icon-check {
		position: absolute;
		right: 0;
		width: 20px;
		cursor: pointer;
	}

	.editable-cell-icon {
		line-height: 18px;
		display: none;
	}

	.editable-cell-icon-check {
		line-height: 28px;
	}

	// .editable-cell:hover .editable-cell-icon {
	// 	display: inline-block;
	// }

	// .editable-cell-icon:hover,
	// .editable-cell-icon-check:hover {
	// 	color: #108ee9;
	// }

	.editable-cell .editable-cell-icon {
		display: inline-block;
	}

	.editable-cell-icon,
	.editable-cell-icon-check {
		color: #108ee9;
	}

	.editable-add-btn {
		margin-bottom: 8px;
	}
</style>
